<template>
    <div class="pie" v-if="Visible">
        <echatrs :id="id" :option="option"></echatrs>
    </div>
</template>

<script>
    import echatrs from '@/components/echatrs'
    import echartsModel from 'echarts'
    export default {
        name: "bar",
        data(){
            return{
                option:{},
                Visible:false
            }
        },
        props:{
            id:String
        },
        components:{
            echatrs
        },
        methods:{
            format(option){
                this.option = {
                    title: {
                        text: null
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    axisLabel: {
                        color: '#000',
                        textStyle: {
                            fontSize: 12
                        },
                    },
                    grid: option.grid || {
                        left: '3%',
                        right: '8%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: [0, 0.01],
                        data: option.xAxis.data,
                        name:option.xAxis?.name,
                        axisLabel:option.xAxis.axisLabel
                    },
                    yAxis: {
                        type: 'value',
                        name: option.yAxis?.name
                    },
                    series:option.series.map(item=>{
                        return{
                            name: item.title,
                            type: item.type || 'bar',
                            data: item.data,
                            stack:item.stack || null,
                            barWidth:item.barWidth ||  '30px',
                            smooth: item.smooth || false,
                            itemStyle: {
                                normal: {
                                    color: new echartsModel.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color:item.color
                                    }, {
                                        offset: 1,
                                        color:'#f8f8f8'
                                    }], false),
                                    barBorderRadius: [5, 5, 0, 0],
                                }
                            }
                        }
                    })
                };
                this.Visible = true
            }
        }
    }
</script>

<style scoped lang="less">
    .pie{
        width: 100%;
        height: 100%;
    }
</style>
